<template
	><main v-my-directive :data-title="content.title" :data-description="content.description">
		<div v-loading.fullscreen.lock="loading" class="QAacHead">
			<div class="QAacnav articlebt line">
				<div class="columnLayout interval">
					<div class="Horizontalspacing interval minfont">
						<div v-if="content" class="Horizontalspacing minixgap">
							<el-avatar class="pimgmins" :src="content.user.Avatar" :size="60">
								<div class="image-slot iconfont icon-setting-role"></div>
							</el-avatar>
							<span v-if="content.user.nickname" class="center">{{ content.user.nickname }}</span>
							<span v-else class="center">{{ content.user.username }}</span>
						</div>
						<div class="center grey">{{ content.Creationtime }}</div>
						<div class="center grey">提问:</div>
					</div>
					<span class="maxqcfont">{{ content.title }}</span>
					<div class="qarowtwofl minfont">
						<div class="Horizontalspacing">
							<el-button size="small" type="primary" @click="Clicktoreply()">
								<el-icon><Plus /></el-icon>
								写回答
							</el-button>
							<el-button size="small" type="primary" plain @click="Favoritelikes()">
								<el-icon v-if="userlike"> <StarFilled /></el-icon>
								<el-icon v-else><Star /></el-icon>
								{{ userlike ? '已收藏' : '收藏' }}{{ collect > 0 ? ' ' + collect : '' }}
							</el-button>
						</div>

						<div class="Horizontalspacing minixgap center">
							<div class="redborad">状态</div>
							<div v-if="Bestanswer" class="center">问题有人回答啦，大家来学习一下吧~</div>
							<div v-else class="center">还没有最佳答案</div>
						</div>
						<div v-if="content.Price > 0" class="Horizontalspacing minixgap center">
							<div class="iconfont icon-dashangzonge red"></div>
							<div class="center"
								>悬赏<span class="red">{{ content.Price }}</span
								>元<span v-if="Bestanswer">已解决</span>
							</div>
						</div>
					</div>
				</div>
				<div class="Horizontalspacing minixgap center"
					><span>浏览</span><span> {{ content.PageView }}</span></div
				>
			</div>
		</div>
		<div class="main">
			<div>
				<div class="content">
					<!--  -->
					<div class="Genericpadding columnLayout">
						<div class="QArectangle articlebt">
							<div class="qzsolld qzsolldav Green">最新问题</div>
						</div>
						<!-- 文章内容 -->
						<div class="columnLayout interval">
							<Reply v-if="content.content" :content="content.content"></Reply>
							<!-- 采纳 -->
							<div v-if="Bestanswer" class="abstracts columnLayout interval">
								<div class="articlebt">
									<div class="Horizontalspacing minaxgap red bold">
										<div class="iconfont icon-dianzan_kuai maxqcfont"></div>
										<div>最佳答案</div>
									</div>
									<div class="Horizontalspacing interval minfont">
										<div class="Horizontalspacing minixgap">
											<el-avatar class="pimgmins center" :src="Bestanswer.username.Avatar" :size="60">
												<div class="image-slot iconfont icon-setting-role"></div>
											</el-avatar>
											<router-link v-if="Bestanswer.username.nickname" class="center" :to="'/homepage/' + Bestanswer.userid">{{ Bestanswer.username.nickname }}</router-link>
											<router-link v-else class="center" :to="'/homepage/' + Bestanswer.userid">{{ Bestanswer.username.nickname }}</router-link>
										</div>
										<div v-if="content.Price > 0" class="Horizontalspacing minixgap center">
											<div class="iconfont icon-dashangzonge red"></div>
											<div class="center grey"
												>悬赏<span class="red">{{ content.Price }}</span
												>元已解决</div
											>
										</div>
									</div>
								</div>
								<!-- 回答 -->
								<Reply :content="Bestanswer.content"> </Reply>
							</div>
							<div class="abstract Horizontalspacing minxgap grey minifont">
								<div class="iconfont icon-gantanhao-yuankuang"></div>
								<div
									>版权：言论仅代表个人观点，不代表官方立场。转载请注明出处：<p class="left">{{ domain }}</p></div
								>
							</div>
						</div>
					</div>
					<!-- 回答问题 -->
					<div class="ThinLineLayout">
						<div class="Genericpadding">
							<div class="articlebt">
								<div>发表回答</div>
								<div class="minfont grey">{{ Replylist.length }}条评论</div>
							</div>
						</div>

						<div v-if="logon" id="Clicktoreply" class="Genericpadding Horizontalspacingg interval">
							<img src="./../assets/img/avatar.png" alt="" class="pimg" />
							<div class="Intervalvertical">
								<div>
									<div>
										<!-- 富文本 -->
										<dexedi height="100px" ref="child"></dexedi>
									</div>
								</div>
								<div class="buttons" @click="processReply()">提交</div>
							</div>
						</div>
						<div v-if="Replylist[0]" class="Genericpadding Intervalvertical">
							<!-- 评论 -->
							<div v-for="(item, index) in Replylist" :key="index" :id="'Reply' + item.id" class="Intervalvertical">
								<div class="articlebt minfont">
									<div class="Horizontalspacing minxgap">
										<el-avatar class="pimgmin" :src="item.username.Avatar" :size="60">
											<div class="image-slot iconfont icon-setting-role"></div>
										</el-avatar>
										<router-link v-if="item.username.nickname" class="center turngreen" :to="'/homepage/' + item.userid">{{ item.username.nickname }}</router-link>
										<router-link v-else class="center turngreen" :to="'/homepage/' + item.userid">{{ item.username.username }}</router-link>
										<el-button v-if="!Bestanswer" type="primary" @click="adopt(item.id)" plain>设为最佳答案</el-button>
										<div v-if="item.optimal == 1" class="iconfont icon-zuijiadaan"></div>
									</div>
									<div class="Horizontalspacing minxgap grey">
										<p class="left">{{ item.Creationtime }}</p>
										<div @click=";(CommentID = item.id), (CommentIDname = item.username), Clicktoreply()">回复</div>
									</div>
								</div>
								<div class="abstracts pmaring TopRectangles">
									<Reply :content="item.content"> </Reply>
								</div>
								<!-- 回复列表 -->
								<ul v-if="item.child" class="pmaring Intervalvertical">
									<div v-for="(item, index) in item.child" :key="index" :id="'Reply' + item.id" class="Intervalvertical">
										<div class="articlebt minfont">
											<div class="Horizontalspacing minxgap grey">
												<el-avatar class="pimgmins" :src="item.username.Avatar" :size="60">
													<div class="image-slot iconfont icon-setting-role"></div>
												</el-avatar>
												<router-link v-if="item.username.nickname" class="center turngreen" :to="'/homepage/' + item.userid">{{ item.username.nickname }}</router-link>
												<router-link v-else class="center turngreen" :to="'/homepage/' + item.userid">{{ item.username.username }}</router-link>
												<div class="iconfont icon-xiangyou minifont center"></div>
												<p v-if="item.superiorname.nickname" class="center turngreen Green" @click="jump('Reply' + item.CommentID)">@{{ item.superiorname.nickname }}</p>
												<p v-else class="center turngreen Green" @click="jump('Reply' + item.CommentID)">@{{ item.superiorname.username }}</p>
											</div>
											<div class="Horizontalspacing minxgap grey">
												<p class="center">{{ item.Creationtime }}</p>
												<div @click=";(CommentID = item.id), (CommentIDname = item.username), Clicktoreply()">回复</div>
											</div>
										</div>
										<div class="abstracts pmaring">
											<Reply :content="item.content"> </Reply>
										</div>
									</div>

									<!-- 这里插入 收起回复  隐藏当前 显示更多 -->
								</ul>
							</div>
						</div>

						<div v-if="Replylist.length < 1" class="Genericpadding">
							<div class="abstracts">
								<p class="center">还没有回答呢，快来抢沙发~</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="left">
				<qaleft></qaleft>
			</div>
		</div>
	</main>
</template>
<script>
	import { mapState } from 'vuex'
	import qaleft from './../components/qaleft'
	import dexedi from './../components/dexedi'
	import { dataRequest as api, setText } from '@/api/api'
	import Reply from './../components/Reply'
	export default {
		name: 'name',
		computed: {
			...mapState(['logon', 'user']),
		},
		components: {
			// 组件
			qaleft,
			dexedi,
			Reply,
		},
		data() {
			return {
				loading: true,
				domain: window.location.href,
				articid: this.$route.params.index.replace(/.html/g, ''),
				content: false,
				Replylist: '',
				CommentID: '',
				Bestanswer: false,
				// 收藏数量
				collect: 0,
				userlike: false,
				//返回值
			}
		},
		methods: {
			async get() {
				let array = await api(['getquestionpage', { id: this.articid }])

				if (array.code == 200) {
					console.log(this.content)
					this.content = array.data[0]
					console.log(this.content)
					this.collect = this.content.collect.length
					this.content.Price = (Math.round(this.content.Price * 1000) / 1000).toString()
				}
				this.getprocessReply()
				if (this.user) {
					this.getFavoritelikes()
				}
				api(['QAbrowsing', [this.articid]])
			},

			// 发送回复
			async processReply() {
				let value = this.$refs.child.delta()
				let delta = value[0]
				if (setText(value[1])) {
					// 内容存在
					let arr = { PostID: this.articid, userid: this.user.id, CommentID: this.CommentID, content: delta.ops }
					arr = await api(['Postanswer', arr])

					if (arr.code == 200) {
						this.getprocessReply()
						this.$message.success('回答成功')
					}
				} else {
					// 回复内容不得为空
					this.$message.error('回答内容不得为空')
				}
				this.CommentID = ''
			},
			// 测试 回答列表
			async getprocessReply() {
				let arr = await api(['getanswer', { PostID: this.articid }])

				if (arr.code == 200) {
					this.Replylist = arr.data
					for (let i = 0; i < this.Replylist.length; i++) {
						if (this.Replylist[i].optimal == 1) {
							this.Bestanswer = this.Replylist[i]
							this.Replylist.splice(i, 1)
							this.Replylist.unshift(this.Bestanswer)
						}
					}
				}
			},
			// 点击回复
			Clicktoreply() {
				const element = document.getElementById('Clicktoreply')
				const distanceToTop = element.offsetTop
				window.scrollTo({ behavior: 'smooth', top: distanceToTop })
				// Clicktoreply
			},
			// 用户采纳
			async adopt(ele) {
				this.$confirm('将本回复作为最佳回复, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(async () => {
						// 用户ID  问答ID  回复ID
						// 后端验证问答ID 的作者ID 是不是等于用户ID  且回复ID的回复的是当前问答ID  如果是 就将回复ID设为最佳
						let arr = { articid: this.articid, CommentID: ele }
						arr = await api(['adopt', arr])
						if (arr.code == 200) {
							this.$message({
								type: 'success',
								message: '设置成功!',
							})
						} else {
							this.$message.error(arr.data)
						}
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消',
						})
					})
			},
			// 收藏點贊 这个必须单独
			async Favoritelikes() {
				if (this.user) {
					let arr = await api(['qaection', { PostID: this.articid }])
					this.userlike = !this.userlike
					this.collect = this.userlike ? this.collect / 1 + 1 : this.collect / 1 - 1
				} else {
					// 没有登录
					this.$message.error('请先登录')
				}
			},
			// 获取点赞
			async getFavoritelikes() {
				this.content.collect.forEach(element => {
					if (element.userid == this.user.id) {
						this.userlike = true
					}
				})
			},
			// 回复楼层跳转
			jump(ele) {
				console.log(ele)
				const element = document.getElementById(ele)
				const rect = element.getBoundingClientRect()
				const topDistance = rect.top + window.pageYOffset - 5
				window.scrollTo({
					top: topDistance,
					behavior: 'smooth', // 使用平滑滚动效果
				})
				console.log(topDistance)
			},
		},
		mounted() {
			// 生命周期:

			this.get()
		},
		updated() {
			this.loading = false
		},
	}
</script>
<style scoped>
	.icon-zuijiadaan {
		font-size: 25px !important;
		color: #f30 !important;
		font-weight: 300 !important;
	}
	.el-button--primary {
		height: 25px !important;
		padding: 5px !important;
		font-size: 12px !important;
	}
	.pimg .image-slot {
		font-size: 20px;
	}
	.pimgmin .image-slot {
		font-size: 12px;
	}
	.pimgmins .image-slot {
		font-size: 8px;
	}
	.qarowtwofl {
		display: flex;
		flex-direction: row;
		gap: 20px;
	}
	@media screen and (max-width: 860px) {
		.content {
			width: 100vw;
		}
		.QAacnav {
			width: 100vw;
			padding: 0.1rem 0.05rem;
		}
		.qarowtwofl {
			gap: 0.1rem;
		}
	}
</style>
